<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="3" v-for="item in typeList" :key="item"
        ><el-button
          @click="changeType(item)"
          :type="currentType == item ? 'primary' : 'default'"
          >{{ item }}</el-button
        ></el-col
      >
    </el-row>
    <template v-if="currentType != '预期目标' ">
      <el-row :gutter="10" class="mb8"  v-if="currentType != '任务目标'">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="Plus" @click="handleAdd"
            >新增</el-button
          >
        </el-col>
        <!-- <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:notice:edit']"
          >修改</el-button
        >
      </el-col> -->
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="Delete"
            :disabled="multiple"
            @click="handleDelete"
            >删除</el-button
          >
        </el-col>
      </el-row>

      <el-table
        v-loading="loading"
        :data="infoList"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column
          label="序号"
          align="center"
          prop="noticeId"
          width="100"
        >
          <template #default="scope">
            <span>{{
              scope.$index +
              1 +
              (queryParams.pageDomain.pageNum - 1) *
                queryParams.pageDomain.pageSize
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="标题"
          align="center"
          prop="name"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="250"
        >
          <template #default="scope">
            <!-- <el-button link type="primary" @click="handleTop(scope.row)">{{
            scope.row.isTop == "1" ? "取消置顶" : "置顶"
          }}</el-button> -->
            <el-button
              link
              type="primary"
              icon="Edit"
              @click="handleUpdate(scope.row)"
              >修改</el-button
            >
            <el-button
              link
              type="primary"
              icon="Delete"
              @click="handleDelete(scope.row)"
              v-if="currentType != '任务目标'"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-else>
      <editor v-model="richText" :min-height="192" />
      <el-row>
        <el-col :span="24">
          <el-button type="primary" @click="submit">确定</el-button>
        </el-col>
      </el-row>
    </template>
    <!-- <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageDomain.pageNum"
      v-model:limit="queryParams.pageDomain.pageSize"
      @pagination="getList"
    /> -->

    <ChartsDialog
      v-model="dialogVisible"
      @confirm="submit"
      :editInfo="editInfo"
      :currentType="currentType"
      :projectId="props.projectId"
    ></ChartsDialog>
  </div>
</template>

<script setup name="Project">
import { listNotice, getNotice, updateNotice } from "@/api/system/notice";
import {
  addNotice,
  delNotice,
  editForTop,
  saveSpectrum,
  getSpectrumListInfo,
} from "@/api/pms/project";
import { addBanner } from "@/api/system/banner";
import ChartsDialog from "./components/chartsDialog.vue";
const props = defineProps({
  projectId: {
    type: String,
  },
});
const route = useRoute();
const router = useRouter();

const { proxy } = getCurrentInstance();
const { sys_notice_status, sys_notice_type } = proxy.useDict(
  "sys_notice_status",
  "sys_notice_type"
);

const infoList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const dialogVisible = ref(false);
const currentNoticeId = ref("");
const chartsInfo = ref({});
const typeList = ["预期目标", "任务目标", "关键路径", "核心知识"];
const currentType = ref("");
const editInfo = ref({});
const richText = ref("");

const data = reactive({
  form: {},
  queryParams: {
    pageDomain: {
      isAsc: "true",
      orderByColumn: "",
      pageNum: 1,
      pageSize: 10,
      reasonable: true,
    },
    proId: "",
    title: "",
  },
  rules: {
    noticeTitle: [
      { required: true, message: "公告标题不能为空", trigger: "blur" },
    ],
    noticeType: [
      { required: true, message: "公告类型不能为空", trigger: "change" },
    ],
  },
});

const { queryParams, form, rules } = toRefs(data);

/** 查询公告列表 */
function getList() {
  loading.value = true;
  getSpectrumListInfo({ proId: props.projectId, name: currentType.value }).then(
    (response) => {
      currentType.value == "预期目标"
        ? (richText.value = response.data)
        : (infoList.value = response.data);
      loading.value = false;
    }
  );
}

/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}

/** 表单重置 */
function reset() {
  form.value = {
    noticeId: undefined,
    noticeTitle: undefined,
    noticeType: undefined,
    noticeContent: undefined,
    status: "0",
  };
  proxy.resetForm("noticeRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  // open.value = true;
  // title.value = "添加公告";
  editInfo.value = null;
  dialogVisible.value = true;
}

/**修改按钮操作 */
function handleUpdate(row) {
  reset();
  editInfo.value = row;
  dialogVisible.value = true;
}

/**跳转活动详情 */
function goDetail(row) {
  reset();
  // const noticeId = row.noticeId || ids.value;
  // getNotice(noticeId).then((response) => {
  //   form.value = response.data;
  //   open.value = true;
  //   title.value = "修改公告";
  // });
  router.push({ path: `detail/${row.id}` });
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["noticeRef"].validate((valid) => {
    if (valid) {
      if (form.value.noticeId != undefined) {
        updateNotice(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addNotice(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

function submit(formData) {
  loading.value = true;
  let params = {
    id: props.projectId,
    list: {},
  };
  if (currentType.value == "预期目标") {
    params.list[currentType.value] = richText.value;
  } else {
    params.list[currentType.value] = [];
    params.list[currentType.value].push(formData);
  }
  saveSpectrum(params).then((response) => {
    proxy.$modal.msgSuccess("新增成功");
    loading.value = false;
    getList();
  });
}
/** 删除按钮操作 */
function handleDelete(row) {
  proxy.$modal
    .confirm("是否确认删除")
    .then(function () {
      loading.value = true;
      let params = {
        id: props.projectId,
        list: {},
      };
      params.list[currentType.value] = [];
      params.list[currentType.value].push(row);
      params.list[currentType.value][0].isDel = true;
      saveSpectrum(params).then((response) => {
        loading.value = false;
        getList();
      });
    })
    .then(() => {
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}

//置顶
function handleTop(row) {
  let params = {
    id: row.id,
    isTop: row.isTop == "1" ? "0" : "1",
  };
  editForTop(params).then((res) => {
    proxy.$modal.msgSuccess("修改成功");
    getList();
  });
}
//点切换按钮
function changeType(v) {
  currentType.value = v;
  getList();
}
onMounted(() => {
  queryParams.value.proId = props.projectId;
  currentType.value = "预期目标";
  getList();
});

// watch(
//   () => props.projectId,
//   (newId, oldId) => {
//     if (newId) {
//       debugger
//       queryParams.value.id = props.projectId;
//       getList();
//     }
//   },
//   { deep: true, immediate: true }
// );
</script>
